<!--
名称: 表格组件1
作者: huangdi_cd
日期: 2021/4/15
说明: 用于即席分析数据准备表格
-->
<template>
    <div style="height:calc(100% - 1px);">
        <div style="height:calc(100% - 60px)">
            <el-table
                :data="tableData"
                ref="grid"
                border
                stripe
                :height="height"
                :paramList="paramList"
                size="mini"
                highlight-current-row
                :selectedData ="selectedData"
                @selection-change="handleSelectionChange"
                :render-header="true"
                :header-cell-style="{background:'#F5F7FA',color:'#0c0c0c',fontSize: '12px'}"
                :row-style="{height: '35px',border: 'none'}"
                :cell-style="{padding: '0px'}"
            >
                <el-table-column v-if ="ifUseTableRodio"
                                 type="selection"
                                 reserve-selection
                                 width="55">
                </el-table-column>
                <el-table-column v-if ="ifUseTableOrder"
                                 type="index" label="序号"
                                 width="50">
                </el-table-column>
                <el-table-column v-if = "ifUseTableBase"
                                 resizable="true"
                                 :show-overflow-tooltip='true'
                                 v-for="(item,index) in columns" :key="index"
                                 :prop="item.dataIndex"
                                 :width="item.width"
                                 :label="item.title || index">
                    <template  slot-scope="scope">
                    <span v-html="translateData(scope.row,scope.column,item)">
                    </span>
                    </template>
                </el-table-column>
                <el-table-column v-if = "!ifUseTableBase"
                                 :render-header="linefeed"
                                 :show-overflow-tooltip='true'
                                 header-align="center"
                                 v-for="(item,index) in tableData[0]" :key="index"
                                 :prop="index"
                                 :label="item.colHeaderName || index"
                >
                </el-table-column>
                <el-table-column v-if="ifUseTableButton"
                                 :render-header="linefeed"
                                 :show-overflow-tooltip='true'
                                 header-align="center"
                                 align="center"
                                 width="200"
                                 label="操作"
                                 resizable="false">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button
                            size="mini"
                            type="text"
                            @click="handleDetail(scope.row)">详情</el-button>
                        <el-button v-if="isDelete"
                                   size="mini"
                                   type="text"
                                   @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页组件 -->
        <div>
            <el-pagination style="margin-top: 10px"
                           v-if="tableData && isPage"
                           background
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="[15, 25, 50, 100,200]"
                           :page-size="currentPage"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="recordNumber">
            </el-pagination>
        </div>
    </div>

</template>

<script>
    export default {
        name: 'ATable1',
        props: {
            tableData: {
                type: Array,
                default: []
            },
            width: {
                type: String
            },
            recordNumber: {
                type: Number,
                default: 15
            },
            ifUseTableButton: {
                type: Boolean,
                default: false
            },
            ifUseTableRodio: {
                type: Boolean,
                default: false
            },
            selectedData: {
                type: Array
            },
            ifUseTableBase: {
                type: Boolean,
                default: false
            },
            columns: {
                type: Array
            },
            ifUseTableOrder: {
                type: Boolean,
                default: false
            },
            isDelete: {
                type: Boolean,
                default: true
            },
            height: {
                type: Number,
                default: window.innerHeight - 280
            },
            paramList: {
                type: Array
            },
            isPage: {
                type: Boolean,
                default: true
            }
        },
        data () {
            return {
                currentPage: 1, // 默认显示第1页面
                pageNo: 1, // 默认参数改变此处需要改变父组件传参的默认值，需要保持一致
                pageSize: 15 // 默认参数改变此处需要改变父组件传参的默认值，需要保持一致
            }
        },
        methods: {
            // 改变页大小
            handleSizeChange (val) {
                console.log(`每页 ${val} 条`)
                this.pageSize = val
                // 调用父组件查询接口
                this.$emit('getData', {pageNo: this.pageNo, pageSize: val})
            },
            // 改变页码，调用父组件查询接口
            handleCurrentChange (val) {
                console.log(`当前页: ${val}`)
                this.pageNum = val
                this.$emit('getData', {pageNo: val, pageSize: this.pageSize})
            },
            linefeed (h, {column, index}) { // column,index都是el-table中自带的
                let number = column.label.length // 表头字数
                let size = 16 // 字体尺寸
                column.minWidth = number * size // 计算宽度
                return h('div', {class: 'table-head', style: {width: '100%', height: '25px'}}, [column.label])
            },
            // 编辑行
            handleEdit (row) {
                this.$emit('handleEdit', row)
            },
            // 查看行详情
            handleDetail (row) {
                this.$emit('handleDetail', row)
            },
            // 删除行
            handleDelete (row) {
                this.$emit('handleDelete', row)
            },
            // 获取选中行数据
            handleSelectionChange () {
                let val = this.$refs.grid.selection
                this.$emit('getSelectRows', val)
            },
            // 反显选中数据
            selectRows (val) {
                this.$nextTick(() => {
                    this.selectedData.forEach(col => {
                        this.tableData.forEach(row => {
                            debugger
                            if (col[val] == row[val]) {
                                debugger
                                this.$refs.grid.toggleRowSelection(row, true)
                            }
                        })
                    })
                    // 可以调用那个选择改变的方法
                    this.flagTmp = true
                })
            },
            getSelectRowData () {
                return this.$refs.grid.selection
            },
            clearSelection () {
                return this.$refs.grid.clearSelection()
            },
            setPage (pageSize = 15, pageNo = 1) {
                this.pageSize = pageSize
                this.pageNo = pageNo
                this.currentPage = pageNo
            },
            // 对数据进行翻译
            translateData (row, column, item) {
                // 需要翻译的具体哪个字段
                var col = column['property']
                var tmp = row[col]
                if (item.ifTranslate != undefined && item.ifTranslate) {
                    var flag = true
                    // 进行翻译的调用
                    this.paramList.forEach(item => {
                        if (item.type === column['property'] && item.code === row[col] && flag) {
                            tmp = item['value']
                            return tmp
                        }
                    })
                }
                return tmp
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    .el-table .cell.el-tooltip {
        white-space: pre-wrap !important;
    }
</style>
